<%@page import="mx.com.switz.autopista.dto.Vehiculo"%>
<%@page import="java.text.DecimalFormat"%>
<%@page import="java.text.DecimalFormatSymbols"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
	<!--begin head-->
	<head>
		<meta charset="utf-8">
		<title>Autopista</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- set content to full screen on iphones -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="description" content="">
		<meta name="author" content="">

        <!--[if lte IE 6]>
            <link rel="stylesheet" href="//universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">
        <![endif]-->

		<!--[if !lte IE 6]><!-->
            <!-- Load Google Web Font -->
            <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
            <!-- Load style.css: contains all css files concatenated to one single file -->
            <link href="../resources/css/style.css" rel="stylesheet">
		<!--<![endif]-->

		<!-- Load HTMLShiv for IE9 HTML5 support -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->	

		<!-- Your Favoriate Icons -->
		<link rel="shortcut icon" href="ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../resources/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../resources/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../resources/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="../resources/ico/apple-touch-icon-57-precomposed.png">
		
		<!--
			NOTE: All the javascripts have been moved to the bottom of the page to load the content faster.
		-->
		<!--Estilo para Boton, tipo hipervinculo -->
		<link href="../resources/css/utileria.css" rel="stylesheet">
	</head><!--end head-->

	<!--begin body-->
	<body>
		<header>
	  		<!--logo area start-->
	  		<div class="logo-area">
	  			<span id="logo"></span>
	  		</div><!--end logo area-->
	  		
	  		<!--nav bar start-->
			<nav class="navbar">
				<div class="navbar-inner">
					<div class="container">
						<!--mobile nav icon (hidden:CSS)-->
						<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
							menu
						</a><!--end btn-navbar-->
						<div class="nav-collapse">
							<ul class="nav">
								<li>
									<a href="/Autopista">Inicio</a>
								</li>
								<li class="active">
									<a href="buscar.html">Buscar vehiculos</a>
								</li>
								<li>
									<a href="buscar.html">Ofertas</a>
								</li>
								<li>
									<a href="contacto.html">Contacto</a>
								</li>
						</ul>


						</div><!-- end nav-collapse -->
					</div><!-- end container-->
				</div><!-- end navbar-inner -->
			</nav><!--end nav bar-->
		</header>



		<section id="main">

			<div class="body-text">
				<div class="container-fluid">
					<div class="row-fluid">
						<div class="span12">							
							<h1>
								<c:out value="${vehiculo.titulo}"/>
							</h1>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span8">
							<!-- // GALLERY START // -->
							<!-- 
								IMPORTANT NOTE: Each property gallery must have an unique ID for the gallery 
												function to work properly. This unique ID must reflect the folder 
												name which contains all the corresponding property images.
												
												**Please refer to the documentation for further usage:
												* IMPORTANT:
												* id   = [PLACE IMAGE FOLDER NAME] 
												* data = [PLACE TEXT TO BE DISPLAYED FOR ATTENTION - LEAVE "" FOR BLANK]
												* num  = [NUMBER OF IMAGES AND CORRESPONDING THUMBNAILS WHICH WILL BE DISPLAYED]
							-->
							
							<!--  <div class="gallery"  id="property_name" data-sticker="Oferta" data-num="8">
								<p>Please enable your javascript to view this gallery</p>
							</div>-->
							<c:forEach items="${imagenes}" var="imagen">
						<img id="imagen" src="../resources/Carros Cuernavaca/<c:out value="${imagen.foto}"/>" />
						</c:forEach>
							<!-- gallery end -->
								
							<%	
						DecimalFormatSymbols simbolo=new DecimalFormatSymbols();
					    simbolo.setDecimalSeparator('.');
					    simbolo.setGroupingSeparator(',');
						DecimalFormat formateador = new DecimalFormat("###,###.##",simbolo);
						Vehiculo vehiculo=(Vehiculo)request.getAttribute("vehiculo");
						int precio=vehiculo.getPrecio();
						int kilometraje=vehiculo.getKilometraje();
							
							%>
							
							<br/>
							<br/>
							
							<!-- about property -->	
							<div class="row-fluid property-info">
									<h4>Descripcion</h4>
									
									<p class="description">
									<c:out value="${vehiculo.descripcionVehiculo}"/>
									</p>
									
									<p class="asking-price">
										<span>Precio</span> $ <c:out value="<%=formateador.format(precio)%>"/>
									</p>
							</div>
							<!-- end about property -->	
						</div>
						<!-- end span8 -->	
						
						<div class="span4">
							<!--key features-->
							<h4>Caracteristicas</h4>
							<div class="property-info">
							<ul class="property-info">
                            	<li><strong>Version :</strong> <c:out value="${vehiculo.modelo}"/></li>
								<li><strong>Km:</strong> <c:out value="<%=formateador.format(kilometraje)%>" /></li>
								<li><strong>Color Ext/Int.:</strong> Rojo/Negro</li>
								<li><strong>Trasmision: </strong> <c:out value="${vehiculo.transmision}"/></li>
								<li><strong>Precio:</strong> $ <c:out value="<%=formateador.format(precio)%>"/></li>
								<li><strong>Municipio:</strong> <c:out value="${vehiculo.municipio}"/></li>								
							</ul>
							</div>
							
							<!--divider-->
							<div class="divider"></div>
							
							<!--single map-->
							<h4>Ubicacion</h4>
							<div id="single_map" style="width:100%; height:250px;" data-address="${vehiculo.direccion}" data-iconrel="../resources/img/pin/marker_2.png" data-zoom="15"> </div>
							
							<!--divider-->
							<div class="divider"></div>
							
							<h4 class="">Contactar al vendedor</h4>
							<!-- contact agent form -->
							<div id="message"></div>
							<form class="form-horizontal contact-agent-form" method="post" action="php/contact_agent.php" name="contactform" id="contactform">
								<span class="label label-info">* campos requeridos</span>
								<input type="text" name="prp_name" id="prp_name" value="Property Name">
		                        <div class="field">
		                            <div class="label_field">
		                                <label for="name" accesskey="N">Nombre*</label>
		                            </div>
		                            <input type="text" name="name" id="name" placeholder="Nombre y apellido" class="span8">
		                        </div>
		
		                        <div class="field">
		                            <div class="label_field">
		                                <label for="email" accesskey="E">Email*</label>
		                            </div>
		                            <input type="email" id="email" name="email" placeholder="email@address.com" class="span8">
		                        </div>
		
		                        <div class="field">
		                            <div class="label_field">
		                                <label for="phone" accesskey="P">Telefono*</label>
		                            </div>
		                            <input type="tel" name="phone" id="phone" placeholder="( 000 ) 000 - 0000" class="span8">
		                        </div>
		
		                        <div class="field">
		                            <div class="label_field">
		                                <label for="comments" accesskey="C">Mensaje</label>
		                            </div>
		                            <textarea name="comments" id="comments" class="span8" placeholder="Escribe tu mensaje" rows="4"></textarea>
		                        </div>
		                        	                        
		                        <div class="button-align">
		                        	<div class="divider"></div>	
		                        	<input type="submit" class="btn" id="submit" value="Enviar mensaje">
		                        	
		                        </div>
		                        
		                    </form>	
		                    <!-- end contact agent form -->	
						</div>

					</div><!-- end row-fluid -->
					
				</div><!--end container-fluid-->
				
			</div><!-- end body-text -->
			

			
			<!-- /container -->
		</section>
		<footer>
			<div class="container-fluid">
				<div class="row-fluid">
			      <div class="span12 contact-info">
			      	<span class="span9">
			      		AutoPista - Todos los derechos reservados • <a href="mailto:info@switz.mx"> info@switz.mx</a>
			      	</span>
			      	
		      		<ul class="span3 social-network">
		      			<li><a href="javascript:void(0)"><i class="icon-linkedin-sign"></i></a></li>
		      			<li><a href="javascript:void(0)"><i class="icon-pinterest-sign"></i></a></li>
		      			<li><a href="javascript:void(0)"><i class="icon-twitter-sign"></i></a></li>
		      			<li><a href="javascript:void(0)"><i class="icon-facebook-sign"></i></a></li>
		      			<li><a href="javascript:void(0)"><i class="icon-google-plus-sign"></i></a></li>
		      		</ul>
			      	
			      </div>
			  	  <div class="clearfix"></div>
				</div><!-- end .row-fluid -->
			</div> <!-- end .container-fluid -->
		</footer>
		<!-- end footer -->
		
		<!--[if !lte IE 6]><!-->
            <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="../resources/js/libs/jquery.min.js"><\/script>')</script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
            <script>window.jQuery.ui || document.write('<script src="../resources/js/libs/jquery.ui.min.js"><\/script>')</script>
            
            																			<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
             <!--[if lt IE 9]> 
             	<script src="js/include/selectivizr.min.js"></script> 					
             <![endif]-->
            
            <script src="../resources/js/libs/jquery.ui.touch-punch.min.js"></script>				<!-- REQUIRED:  A small hack that enables the use of touch events on mobile -->
            
            <!-- Add 'http:' for testing locally -->
            <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
            
            <script src="../resources/js/menu/jquery.ct.3LevelAccordion.min.js"></script>     		<!-- REQUIRED: Accordion Menu with filter-->
            <script src="../resources/js/slider/jquery.responsivethumbnailgallery.min.js"></script>  <!-- REQUIRED: Responsive Gallery Plugin -->
            <script src="../resources/js/slider/jquery.onebyone.min.js"></script>     				<!-- REQUIRED: Slider Plugin -->
            <script src="../resources/js/slider/jquery.touchwipe.min.js"></script>    				<!-- REQUIRED: Plugin to make Slider Plugin work on Touch Devices -->
            <script src="../resources/js/slider/jquery.onebyone.min.js"></script>     				<!-- REQUIRED: Slider Plugin -->
            <script src="../resources/js/slider/jquery.touchwipe.min.js"></script>    				<!-- REQUIRED: Plugin to make Slider Plugin work on Touch Devices -->
    
            <script src="../resources/js/include/jquery.fitvids.min.js"></script>     		 		<!-- RECOMMENDED: Responsive videos -->			
            <script src="../resources/js/include/jquery.tweet.min.js"></script>     		 			<!-- OPTIONAL: Twitter display plugin -->
            <script src="../resources/js/include/jquery.equal-heights.min.js"></script> 	 			<!-- RECOMMENDED: Plugin to keep div heights consistant -->	
            <script src="../resources/js/include/jquery.todo.min.js"></script>					 	<!-- REQUIRED: Plugin to save "add to short list" items -->
            <script src="../resources/js/include/jquery.pubsub.min.js"></script>				 		<!-- REQUIRED: (If todo.js is in use) Dependent with todo.js -->
            <script src="../resources/js/include/jquery.select2.min.js"></script>			 		<!-- RECOMMENDED: Custom jQuery/searchable dropdowns -->	
            <script src="../resources/js/include/bootstrap.min.js"></script> 			 			<!-- REQUIRED: For BootStrap build -->
            
            <script src="../resources/js/config.js"></script>						 				<!-- DO NOT REMOVE: Contains major plugin initiations and functions -->
		<!--<![endif]-->

	</body>
</html>
